﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Store.aspx.cs" Inherits="NX5Web.admin.Setting.Store" %>
 


<div id="subApp" style="margin:15px;">


        <el-dialog
  v-model="dialog"
  title="添加"
  width="500" 
>
  <div>
      <el-form  ref="form" :model="form" :rules="rules"  label-width="auto" style="max-width: 600px"> 
          <%--<el-form-item label="所属" prop="CompanyId"> 
                <el-select v-model="form.CompanyId">
                    <el-option v-for="(item,index) in CompanyList" :label="item.CompanyName" :value="item.ID"></el-option> 
                </el-select>
            </el-form-item> --%>
          <el-form-item label="标题" prop="Title">
            <el-input  v-model="form.Title"/>
          </el-form-item>  
          <el-form-item label="预览图" prop="Img">
              <template style="    display: block;">
                  <el-image style="width: 100px; height: 100px" :src="form.Img" :fit="fill" />
              </template>
               
              <el-upload
                class="avatar-uploader"
                action="/ApiFilter/UploadFiles.ashx"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
              >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
            </el-form-item>   
          <el-form-item label="余量" prop="Number">
              <el-input-number v-model="form.Number" :min="0"/>
            </el-form-item>  
            <el-form-item label="消耗金币" prop="UseCoin">
              <el-input-number v-model="form.UseCoin" :min="1"/>
            </el-form-item>   
            <el-form-item label="采购链接" prop="BuyUrl">
              <el-input  v-model="form.BuyUrl"/>
            </el-form-item>  
          <el-form-item label="上架" prop="Valid">
              <el-checkbox v-model="form.Valid" label="勾选后上架商品" />
            </el-form-item> 
      </el-form>
  </div>
  <template #footer>
    <div class="dialog-footer">
      <el-button @click="dialog = false">取 消</el-button>
      <el-button type="primary" @click="addStoreItem()">
        确 定
      </el-button>
    </div>
  </template>
</el-dialog>



     <div>
        <el-button type="primary" @click="showAddDia()">添 加</el-button>   
        <el-text style="margin:0px 10px;">50币≈1元</el-text>
        <%--<el-button type="primary" @click="showAddDia()">批量导入</el-button> 
        <el-button type="primary" @click="showAddDia()">导 出</el-button> --%>
    </div> 
    <div style="margin-top:10px;">
        <el-table :data="StoreList" style="width: 100%">
           <%--<el-table-column type="selection" width="55" ></el-table-column>--%>
           <el-table-column label="" width="120" >
             <template #default="scope">
                 <el-image style="width: 100px; height: 100px" :src="scope.row.Img" :fit="fill" />
             </template>
           </el-table-column> 
            <el-table-column label="名称" width="180" >
              <template #default="scope">{{ scope.row.Title }}</template>
            </el-table-column> 
             <el-table-column label="兑换价" width="120" >
              <template #default="scope">{{ scope.row.UseCoin }}</template>
            </el-table-column> 
             <el-table-column label="余量" width="120">
               <template #default="scope">{{ scope.row.Number }}</template>
             </el-table-column> 
            <el-table-column label="购买地址">
              <template #default="scope">{{ scope.row.BuyUrl }}</template>
            </el-table-column>  
            <el-table-column label="是否上架" width="120">
              <template #default="scope">{{ scope.row.Valid?'是':'否' }}</template>
            </el-table-column> 
           <el-table-column label="" width="180">
              <template #default="scope">
                <el-button v-if="scope.row.Valid" size="small" @click="handleEdit(scope.$index, scope.row)">
                  编辑
                </el-button>
                <el-button v-if="scope.row.Valid"
                  size="small"
                  type="danger"
                  @click="handleEdit(scope.$index, scope.row)"
                >
                  下架
                </el-button>

                  <el-button v-if="!scope.row.Valid"
              size="small"
              type="danger"
              @click="handleReset(scope.$index, scope.row)"
            >
              上架
            </el-button>
              </template>
            </el-table-column>
        </el-table>
    </div> 
</div>


<script>
    var subApp = createApp({
        el: '#subApp',
        data() {
            return {
                dialog: false, 
                form: {
                    Title: "",
                    Img: "",
                    Number: "",
                    BuyUrl: "",
                    UseCoin: "",
                    Valid:true
                },
                rules: {
                    //CompanyId: [
                    //    { required: true, message: '', trigger: 'change' }
                    //],
                    Title: [
                        { required: true, message: '', trigger: 'blur' }
                    ],
                    Img: [
                        { required: true, message: '', trigger: 'blur' }, 
                    ],
                    Number: [
                        { required: true, message: '', trigger: 'blur' }, 
                    ],
                    UseCoin: [
                        { required: true, message: '', trigger: 'blur' }
                    ]
                },
                mode: 'new',
                StoreList: [],
                ActiveItem: null
            }
        },
        computed: {
        },
        methods: {  
            handleAvatarSuccess(data) {
                console.log(data[0]["file"]);
                this.form.Img = data[0]["file"];
            }, 
            handleEdit(index,row) {
                this.dialog = true;
                this.mode = 'edit';
                this.ActiveItem = row;
                this.form.Title = row["Title"];
                this.form.Number = row["Number"];
                this.form.Img = row["Img"];
                this.form.UseCoin = row["UseCoin"];
                this.form.Valid = row["Valid"];
                this.form.BuyUrl = row["BuyUrl"];
            },
            showAddDia() {
                this.dialog = true;
                this.mode = 'new';
            },
            addStoreItem() {
                this.$refs.form.validate((valid, fields) => {
                    var proc = '';
                    var data = {};
                    if (this.mode == 'new') {
                        proc = 'Cus_AddStore';
                        data = {
                            "Title": this.form.Title,
                            "Number": this.form.Number,
                            "Img": this.form.Img,
                            "UseCoin": this.form.UseCoin,
                            "Valid": this.form.Valid ? 1 : 0,
                            "BuyUrl": this.form.BuyUrl
                        }
                    } else {
                        proc = 'Cus_EditStore';
                        data = {
                            "ID": this.ActiveItem.ID,
                            "Title": this.form.Title,
                            "Number": this.form.Number,
                            "Img": this.form.Img,
                            "UseCoin": this.form.UseCoin,
                            "Valid": this.form.Valid ? 1 : 0,
                            "BuyUrl": this.form.BuyUrl
                        }
                    }
                    if (valid) {
                        loaddingPlus(true); 
                        ktlapi({
                            "action": proc,
                            "data": data
                        }).then(res => { 
                            this.dialog = false;
                            this.$refs.form.resetFields()
                            loaddingPlus(false);
                            this.init();
                        });
                    } else {
                        console.log('error submit!', fields)
                    }
                });
            },
            init() {
                loaddingPlus(true);
                var user = new ktluser();
                ktlapi({ 
                    "action": "Cus_StoreItems",
                    "data": { 
                    }
                }).then(res => {
                    this.StoreList = res.data;
                    loaddingPlus(false);
                });
            }
        },
        mounted: function () {
            this.init();
        }
    });
</script>